<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'headerColor'" :backColor="'text-white'">
			<block slot="backText">
				<view class="text-white ">
					余额管理
				</view>
			</block>
		</cu-custom>
		<view class="balance flex flex-direction justify-around" style="padding: 70rpx 0;">
			<view class="text-df text-white">可提现金额</view>
			<view class="text-xxl text-bold">￥{{info.balance}}</view>
			<view ><button class="cu-btn round line-white text-white" style="width: 150rpx;" @click="showmodel" data-model="Withdrawal">提现</button></view>
		</view>
		
		<van-popup :show="model==='Withdrawal'" @close="hidemodel" closeable round>
			<view class="padding">
				<view class="text-center text-lg">提现</view>
				<input type="text" class="cu-form-group text-xl text-green solid radius margin-tb-sm" v-model="Withdrawal" placeholder="请输入提现金额" @input="checkNum($event)"  placeholder-style="font-size:24rpx" />
				<button type="default" class="cu-btn block" @click="MerchantWithdrawal">确认提现</button>
			</view>
		</van-popup>
		
		<view class="cu-list menu margin-bottom-sm"
			:class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
			<!-- <view class="cu-item arrow">
				<view class="content" hover-class="none" @click="$goPageIsLoginOk('./Capitaletails?select=1')">
					<text class="cuIcon-calendar text-black"></text>
					<text class="text-black test-sm">提现记录</text>
				</view>
			</view> -->
			<view class="cu-item arrow">
				<view class="content" hover-class="none" @click="$goPageIsLoginOk('./Capitaletails')">
					<text class="cuIcon-coin text-black"></text>
					<text class="text-black test-sm">我的收入明细</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content" hover-class="none" @click="$goPageIsLoginOk('./BindCard')">
					<text class="cuIcon-coin text-black"></text>
					<text class="text-black test-sm">绑定银行卡</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				Withdrawal:'',
				model:null,
			};
		},
		onShow() {
			this.$u.adminApi
				.getStoreInfo({
					storeId: this.vuex_bussinessId
				})
				.then(res => {
					this.info = res.data;
				});
		},
		methods: {
			MerchantWithdrawal(){
				this.$u.adminApi.MerchantWithdrawal({
					storeId:this.vuex_bussinessId,
					money:this.Withdrawal
				}).then(res=>{
					if(res.code===200){
						this.$successToast(res.message)
						this.info.balance=res.data
						this.model=null
					}
				})
			},
			

			showmodel(e){
				this.model=e.currentTarget.dataset.model
			},
			hidemodel(){
				this.model=null
			},
			// 实时监听input输入为数字
			checkNum(e){
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				if (!val) {
					this.Withdrawal = '';
					return
				}
				var reg = /[^\d.]/g
			
				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				this.$nextTick(() => {
					this.Withdrawal = val;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.balance{
		color: #fff;
		text-align: center;
		height: 370rpx;
		width: 100%;
		background-color: #24B360;
	}
</style>
